<template>
  <select @change="picked">
    <option :style="{fontFamily:font}" v-for="(font,index) in fonts" :key="index">{{font}}</option>
  </select>
</template>

<script>
export default {
  name: 'FontSelector',
  methods: {
    picked(font) {
      this.$emit('update-font', font.target.value)
    },
  },
  data() {
    return {
      fonts: [
        'Roboto',
        'Zilla Slab Highlight',
        'Open Sans',
        'Spectral',
        'Slabo 27px',
        'Lato',
        'Roboto Condensed',
        'Oswald',
        'Source Sans Pro',
        'Raleway',
        'Zilla Slab',
        'Montserrat',
        'PT Sans',
        'Roboto Slab',
        'Merriweather',
        'Saira Condensed',
        'Saira',
        'Open Sans Condensed',
        'Saira Semi Condensed',
        'Saira Extra Condensed',
        'Julee',
        'Archivo',
        'Ubuntu',
        'Lora',
        'Manuale',
        'Asap Condensed',
        'Faustina',
        'Cairo',
        'Playfair Display',
        'Droid',
        'Noto Sans',
        'PT',
        'Droid Sans',
        'Arimo',
        'Poppins',
        'Sedgwick Ave Display',
        'Titillium Web',
        'Muli',
        'Sedgwick Ave',
        'Indie Flower',
        'Mada',
        'PT Sans Narrow',
        'Noto',
        'Bitter',
        'Dosis',
        'Josefin Sans',
        'Inconsolata',
        'Bowlby One SC',
        'Oxygen',
        'Arvo',
        'Hind',
        'Cabin',
        'Fjalla One',
        'Anton',
        'Cairo',
        'Playfair Display',
        'Droid ',
        'Noto Sans',
        'PT',
        'Droid Sans',
        'Arimo',
        'Poppins',
        'Sedgwick Ave Display',
        'Titillium Web',
        'Muli',
        'Sedgwick Ave',
        'Indie Flower',
        'Mada',
        'PT Sans Narrow',
        'Noto',
        'Bitter',
        'Dosis',
        'Josefin Sans',
        'Inconsolata',
        'Bowlby One SC',
        'Oxygen',
        'Arvo',
        'Hind',
        'Cabin',
        'Fjalla One',
        'Anton',
        'Acme',
        'Archivo Narrow',
        'Mukta Vaani',
        'Play',
        'Cuprum',
        'Maven Pro',
        'EB Garamond',
        'Passion One',
        'Ropa Sans',
        'Francois One',
        'Archivo Black',
        'Pathway Gothic One',
        'Exo',
        'Vollkorn',
        'Libre Franklin',
        'Crete Round',
        'Alegreya',
        'PT Sans Caption',
        'Alegreya Sans',
        'Source Code Pro',
      ],
    }
  },
}
</script>